import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import *as CustomIcons from './CustomIcons.tsx'; // 确保导入了所有自定义图标


const CustomIconSelector = () => {
    const [visible, setVisible] = useState(false);
    const [selectedIcon, setSelectedIcon] = useState(null);

    const handleOpen = () => {
        setVisible(true);
    };

    const handleClose = () => {
        setVisible(false);
    };

    const handleSelect = (IconComponent) => {
        setSelectedIcon(IconComponent);
        setVisible(false); // 选择后关闭Modal
    };

    const renderIcons = () => {
        return Object.keys(CustomIcons).map((iconName) => {
            console.log(iconName,'iconName')
            const IconComponent = CustomIcons[iconName];
            return (
                <div
                    key={iconName}
                    style={{
                        display: 'inline-block',
                        width: '50px',
                        height: '50px',
                        margin: '10px',
                        textAlign: 'center',
                        cursor: 'pointer',
                    }}
                    onClick={() => handleSelect(IconComponent)}
                >
                    <IconComponent style={{ fontSize: '24px' }} />
                    <div>{iconName}</div>
                </div>
            );
        });
    };

    return (
        <div>
            <Button onClick={handleOpen}>选择自定义图标</Button>
            <Modal
                title="选择图标"
                visible={visible}
                onCancel={handleClose}
                footer={null}
                width={600}
            >
                <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                    {renderIcons()}
                </div>
            </Modal>

            {selectedIcon && (
                <div style={{ marginTop: '20px' }}>
                    选中的图标:
                    {/* <selectedIcon style={{ fontSize: '24px', marginLeft: '10px' }} /> */}
                </div>
            )}
        </div>
    );
};

export default CustomIconSelector;
